import {useCallback, useRef, useState} from "react";
import {observer} from "mobx-react";
import {useReady, getWindowInfo, navigateTo} from '@tarojs/taro';
import classNames from "classnames";
import {debounce} from "lodash";
import {Input, View, Image, MapProps} from "@tarojs/components";
import SearchIcon from '@/assets/imgs/search-icon.png';
import styles from "./index.module.scss";
import {Drag, List} from './components';

interface Props {
  dots: MapProps['markers'];
  onBackToView?: () => void;
  setLocation?: (coord: ICoord) => void;
  hide: boolean;
}

function BottomArea(props: Props) {
  const windowHeight = useRef(0);
  const btmOffset = useRef(0);
  const [distance, setDistance] = useState(1);
  const [inTransition, setInTransition] = useState(false);
  const isPullDown = useRef(false);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const cancelHTrans = useCallback(debounce(() => setInTransition(false), 600), []);

  const onTransition = useCallback((fn: () => void) => {
    setInTransition(true);
    fn();
    cancelHTrans();
  }, [cancelHTrans]);

  // 必须在这个生命周期中拿到窗口高度 过早获取会导致取得的是未适配完成的高度
  useReady(()=>{
    windowHeight.current = getWindowInfo().windowHeight;
    btmOffset.current = -windowHeight.current;
    setDistance(0);
  });

  const onDragEnd = useCallback(()=>{
    onTransition(()=>{
      setDistance(value => {
        const offsetPercent = (btmOffset.current - value + windowHeight.current) / windowHeight.current;
        if(offsetPercent > 0.1){
          btmOffset.current = 0;
        }else{
          btmOffset.current = -windowHeight.current;
        }
        return 0;
      });
    });
  },[onTransition]);

  const onDrag = useCallback((currentDistance: number)=>{
    setDistance(value => {
      const currentOffset = btmOffset.current - currentDistance;
      // 如果从初始位置往下拖动 则不执行拖拽效果
      if(currentOffset < -windowHeight.current){
        return value;
      }else{
        return currentDistance;
      }
    });
  }, []);

  const onListPullDown = useCallback(()=>{
    onTransition(()=>{
      isPullDown.current = true;
      btmOffset.current = -windowHeight.current;
    });
  },[onTransition]);

  const onListUpClick = useCallback(()=>{
    onTransition(()=>{
      btmOffset.current = 0;
      setDistance(0);
    });
  }, [onTransition]);

  /* 根据移动距离计算透明度
     从初始位置向上移动时才增加透明度
     透明度从0.4开始变化 不然拉到顶都无法完全遮挡住地图
   */
  let opacity = 0;
  // 如果是从上往下划回来 全程不透明
  if(isPullDown.current){
    opacity = 1;
    isPullDown.current = false;
  }else{
    const offset = btmOffset.current - distance + windowHeight.current;
    if(offset > 0){
      opacity = offset / windowHeight.current + 0.4;
    }
  }

  const bottomAreaStyle: any = {background: `rgba(255,255,255, ${opacity})`, display: props.hide ? 'none' : 'block'};
  if(distance <= 0){
    bottomAreaStyle.bottom = `${btmOffset.current - distance}px`;
  }

  const toSearchPage = useCallback(()=>{
    navigateTo({url: '/pages/search/index'});
  },[]);

  return (
    <View
      className={classNames(styles.bottomArea, inTransition ? styles.inTransition : null)}
      style={bottomAreaStyle}
    >
      <Drag onDrag={onDrag} onDragEnd={onDragEnd} />
      <View className={styles.searchAndExplore}>
        <View className={styles.search} onClick={toSearchPage}>
          <Image src={SearchIcon} />
          <Input placeholder='炸串、烧烤、冰粉等' disabled />
        </View>
        <View className={styles.explore} onClick={onListUpClick} />
      </View>

      <List onPulDown={onListPullDown} style={{opacity}} />

      <View
        onClick={props.onBackToView}
        className={styles.backToViewBtn}
      />
    </View>
  );
}

export default observer(BottomArea);
